<template>
  <el-scrollbar ref="verticalMenusRef" class="vertical-menus-scrollbar">
    <el-menu class="layouts-menu-vertical" :collapse-transition="false" :unique-opened="config.layout.menuUniqueOpened"
      :default-active="state.defaultActive" :collapse="config.layout.menuCollapse">
      <MenuTree :menus="navTabs.state.tabsViewRoutes" />
    </el-menu>
  </el-scrollbar>
</template>

<script setup>
import { computed, nextTick, onMounted, reactive, ref } from "vue";
import MenuTree from "./menuTree.vue";
import { useRoute, onBeforeRouteUpdate } from "vue-router";
import { useConfig } from "@/stores/config";
import { useNavTabs } from "@/stores/navTabs";

const config = useConfig();
const navTabs = useNavTabs();
const route = useRoute();
const verticalMenusRef = ref();

const state = reactive({
  defaultActive: "",
});
const verticalMenusScrollbarHeight = computed(() => {
  let menuTopBarHeight = 0;
  if (config.layout.menuShowTopBar) {
    menuTopBarHeight = 50;
  }
  if (config.layout.layoutMode === "Default") {
    return "calc(100vh - " + (32 + menuTopBarHeight) + "px)";
  } else {
    return "calc(100vh - " + menuTopBarHeight + "px)";
  }
});

// 激活当前路由的菜单
const currentRouteActive = (currentRoute) => {
  state.defaultActive = currentRoute.path;
};

// 滚动条滚动到激活菜单所在位置
const verticalMenusScroll = () => {
  nextTick(() => {
    let activeMenu = document.querySelector(
      ".el-menu.layouts-menu-vertical li.is-active"
    );
    if (!activeMenu) return false;
    verticalMenusRef.value?.setScrollTop(activeMenu.offsetTop);
  });
};

onMounted(() => {
  currentRouteActive(route);
  verticalMenusScroll();
});

onBeforeRouteUpdate((to) => {
  currentRouteActive(to);
});
</script>
<style scoped>
.vertical-menus-scrollbar .el-menu {
  border: none;
}

.vertical-menus-scrollbar {
  height: v-bind(verticalMenusScrollbarHeight);
  background-color: v-bind('config.getColorVal("menuBackground")');
}

.layouts-menu-vertical {
  border: 0;
  --el-menu-bg-color: v-bind('config.getColorVal("menuBackground")');
  --el-menu-text-color: v-bind('config.getColorVal("menuColor")');
  --el-menu-active-color: v-bind('config.getColorVal("menuActiveColor")');
  --el-menu-hover-bg-color: v-bind('config.getColorVal("menuHoverBackground")');
}
</style>
